* {
margin: 0;
padding: 0;
}
body {
background: #151515;
color: #fff;
display: grid;
place-items: center;
height: 100vh;
}
.switch {
position: relative;
width: 14rem;
padding: 0 1rem;
font-family: verdana;
}
.switch::before {
content: " ";
position: absolute;
left: 0;
z-index: -1;
width: 100%;
height: 3rem;
background: #333;
border-radius: 30px;
}
.switch__label {
display: inline-block;
width: 2rem;
padding: .9rem 1rem;
text-align: center;
cursor: pointer;
transition: color 200ms ease-out;
}
.switch__label:hover {
color: white;
}
.switch__indicator {
width: 4rem;
height: 4rem;
position: absolute;
top: -0.5rem;
left: 0;
background: blue;
border-radius: 50%;
transition: transform 600ms cubic-bezier(0.02, 0.94, 0.09, 0.97), background 300ms cubic-bezier(0.17, 0.67, 0.14, 1.03);
transform: translate3d(1rem, 0, 0);
}
.switch input#one:checked~.switch__indicator {
background: PaleGreen;
transform: translate3d(1.2rem, 0, 0);
}
.switch input#two:checked~.switch__indicator {
background: MediumTurquoise;
transform: translate3d(5.5rem, 0, 0);
}
.switch input#three:checked~.switch__indicator {
background: PaleVioletRed;
transform: translate3d(10.6rem, 0, 0);
}
.switch input[type=radio]:not(:checked),
.switch input[type=radio]:checked {
display: none;
}